<template>
	<view>
		<view class="loginTop">
			<image class="img" src="@/static/images/banner_02.jpg" mode="heightFix"></image>
			<h1>Hi，欢迎登录~</h1>
		</view>
		<view class="loginMain">
			<view class="flex flex-y-center item">
				<image src="@/static/images/yh.png" mode=""></image>
				<text>用户名</text>
			</view>
			<input class="input" v-model="sendData.username" type="text" value="" placeholder="请输入您的用户名" />
			<view class="flex flex-y-center item">
				<image src="@/static/images/ma.png" mode=""></image>
				<text>密码</text>
			</view>
			<input class="input" v-model="sendData.password" type="text" value="" password placeholder="请输入您的密码" />
			<view class="btn mb30" @click="login">登录</view>
			<image @click="wxSubmitLogin" class="wxImg" src="@/static/images/wx.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getopenidBycode,
		wxLogin
	} from "@/api/index.js";
	import store from "@/store/index.js";
	import {
		useStore
	} from "vuex";
	const {
		dispatch,
		state,
		commit
	} = useStore();
	const sendData = ref({
		username: '',
		password: '',
		openid: '',
	})
	onShow(() => {
		// #ifdef MP-WEIXIN
		wx.login({
			success(res) {
				if (res.code) {
					//发起网络请求
					getOpenid(res.code)
				} else {
					console.log('登录失败！' + res.errMsg)
				}
			}
		})
		// #endif
	})
	// 登录
	const login = async () => {
		if (!sendData.value.username) return uni.$showMsg("请填写用户账号");
		// if (!isValidPhoneNumber(sendData.value.mobile)) return uni.$showMsg("请输入正确的手机号");
		if (!sendData.value.password) return uni.$showMsg("请填写用户密码");
		const res = await dispatch("login", sendData.value);
		// if (code === 101) return uni.$showMsg(msg);
		if (res.code == 200) {
			loginSuccess(res)
		} else {
			uni.$showMsg(res.msg)
		}
	}
	// 获取openid
	const getOpenid = (code) => {
		getopenidBycode({
			code: code
		}).then((res) => {
			if (res.code == 200) {
				sendData.value.openid = res.openid
				commit("SET_OPENID", res.openid);
			}
		})
	}
	// 根据openid登录
	const wxSubmitLogin = () => {
		wxLogin({
			openid: sendData.value.openid
		}).then(res => {
			if (res.code == 200) {
				loginSuccess(res)
			} else {
				uni.$showMsg(res.msg)
			}
		})
	}
	const loginSuccess = async (res) => {
		commit("SET_TOKEN", res.token);
		await dispatch("getUserInfo", true);
		uni.$showMsg('登录成功');
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}, 2000)
	}
</script>

<style lang="scss" scoped>
	.loginTop {
		position: relative;
		overflow: hidden;

		.img {
			width: 100%;
		}

		h1 {
			position: absolute;
			top: 50rpx;
			left: 30rpx;
			font-weight: 600;
			font-size: 30rpx;
		}
	}

	.loginMain {
		padding: 100rpx 30rpx 30rpx 30rpx;
		border-top-right-radius: 35rpx;
		border-top-left-radius: 35rpx;
		margin-top: -200rpx;
		position: relative;
		z-index: 1;
		background-color: #fff;

		.item {
			image {
				width: 40rpx;
				height: 40rpx;
			}

			text {
				font-size: 30rpx;
				margin-left: 5rpx;
			}
		}

		.input {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #000;
			border-bottom: 1px solid #666;
			margin-bottom: 20rpx;
		}

		.btn {
			display: block;
			width: 100%;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			@include bg();
			border-radius: 88rpx;
			margin-top: 100rpx;
		}
	}

	.wxImg {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
		display: block;
	}
</style>